<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-input-row {
				position: absolute;
				left: 35px;
				right: 18px;
				bottom: 0px;
				z-index: 99;
			}
			
			.mui-input-row input {
				color: black;
				background-color: #EFEFF4;
			}
			
			.fiends-div {
				width: 100%;
				background-color: #FFFFFF;
				border-bottom: 1px solid #F7F7F7;
				display: flex;
				align-items: center;

			}
			
			.friend-heddimg {
				width: 10%;
				margin-right: 5%;
				margin-left: 3%
			}
			
			.card-div {
				display: none;
			}
			
			.mui-content {
				height: 100px;
				margin-top: 100px;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="backicon"></a>
			<div class="mui-input-row mui-search">
				<input type="search" class="mui-input-clear" placeholder="查找好友" id="inputt">
			</div>
		</header>

		<div class="mui-content" id="mui-content">
			<!--列表渲染处-->
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/arttmpl.js"></script>
		<script type="text/javascript">
			mui.init();

			mui.plusReady(function() {
				starbar();
				plus.navigator.setStatusBarStyle('dark');

				//点击返回事件
				var old_back = mui.back;
				mui.back = function() {
					old_back();
					plus.navigator.setStatusBarStyle('light');
				}
				
				//点击屏幕变色
				mui(document).on('touchstart', '.bgtoggle', function() {
					this.style.backgroundColor = '#F7F7F7'
				}, false);
				mui(document).on('touchend', '.bgtoggle', function() {
					this.style.backgroundColor = '#FFFFFF';
				}, false);
				
				//搜索用户
				document.getElementById("inputt").addEventListener("keydown", function(e) {
					if(e.keyCode == 13) { //点击了“搜索”  
						//document.activeElement.blur();//隐藏软键盘 
						plus.nativeUI.showWaiting("查找中...");
						var card = this.value;
						mui.ajax('https://www.lunyuwang.com/friendListController/sreachMyFriend', {
							data: {
								lyuser_Card: plus.storage.getItem("card"),
								keyWord: card
							},
							crossDomain: true, //强制使用5+跨域
							dataType: 'json', //服务器返回json格式数据
							type: 'get', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							//processData: false,
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							success: function(data) {
								var reecord = data.userlist;
								var str = template('friends-list', {
									"record": reecord
								});
								document.getElementById('mui-content').innerHTML = str;
								var viewwidth = document.body.clientWidth;
								var headimg = document.getElementsByClassName('fiends-div');
								var num = document.getElementsByClassName('fiends-div').length;
								for(var i = 0; i < num; i++) {
									headimg[i].style.padding = "-webkit-calc(" + viewwidth * 0.02 + "px) 0"
									headimg[i].getElementsByTagName('img')[0].style.height = "-webkit-calc(" + viewwidth * 0.1 + "px)";
								}
								plus.nativeUI.closeWaiting();
							}
						})
					}
				}, false);
				
				//跳转到好友详情页面
				mui('#mui-content').on('tap' , '.fiends-div' , function(){
					document.getElementById('inputt').blur();
					var ta_card = this.getElementsByTagName('text')[0].textContent;
					mui.openWindow({
						url: "friendhtml.html",
						id: "friendhtml.html",
						extras: {
							card: ta_card,
							flag: '2'
						}
					})
				})
			})
		</script>

		<!--列表渲染模板-->
		<script type="text/template" id="friends-list">
			<% for(var i in record){ var item=record[i]; %>
			<div id="fiends-div<%=(i+1)%>" class="fiends-div bgtoggle">
				<text class="card-div"><%=item.lyuser_Card%></text>
				<img src="<%=item.lyuser_FacePath%>" class="friend-heddimg" />
				<text><%=item.lyuser_NickName%></text>
			</div>
			<% } %>
		</script>
	</body>

</html>